@charset "UTF-8";
@import "./_kit/variables.scss";
@import "./_kit/_mixin.scss";
@import "./_kit/button.scss";


.mine-container{
    background: url("../../assets/images/background.png") no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
        overflow: auto;
    .mine-wrap{
        margin:$rem*10 $rem*20 0;
        background-color: rgba(253,255,254,.9);
        border-radius: $rem*10;
        .mine-content{
            padding: $rem*30;
               h3{
                   display: inline-block;
                   font-size: $rem*26;
                   color: #666;
                   padding: $rem*10;
               }
               .title-name{
                   width: 16%;
               }
               .title-input{
                   display: inline-block;
                   border-bottom: $rem*1 solid #666;
                   background: transparent;
                   width: 82%;
                   height: $rem*60;
               }
               .main{
                   margin-top: $rem*30;
               }
               .textarea{
                   width: 100%;
                   margin: $rem*10 0;
                   border: $rem*1 solid #666;
                   padding:$rem*10 $rem*20;
                   height: $rem*660;
                   background: transparent;
                   text-indent: $rem*30;
                   outline: none;
                   overflow-y: auto;
                   user-select:auto;
                   -webkit-user-select:auto;
               }
            .check-image{
                margin-top: $rem*32;
                padding-bottom: $rem*40;
                position: relative;
                input[type="file"]{ 
                    position: absolute;
                    top: 0;
                    left:0;
                    opacity: 0;
                }
                .icon{
                    margin-right: $rem*20;
                    width: $rem*57;
                    display: inline-block;
                    i{
                       background: url("../../assets/images/check_icon.png") no-repeat;
                       width: $rem*57;
                       height: $rem*44;
                        vertical-align: -$rem*12;
                        display: inline-block;
                        background-size: contain;
                    }
                }
                .path-icon{
                    display: inline-block;
                    height: $rem*60;
                    padding-left:$rem*30;
                    border-radius: $rem*10;
                    width: 86%;
                }
            }
            .commit-wrap{
                text-align: center;
                button{
                    width: $rem*186;
                    height: $rem*88;
                    background-color:#C52B3E;
                    border-radius: $rem*10;
                    margin: $rem*30 0;
                    font-size: 1rem;
                    color: #fff;
                    border: none;
                    padding: 0 $rem*20;
                }
            }
        }
    }
    .mine-title-bg{
        width: 100%;
        height: $rem*291;
        -webkit-filter: blur(8px);
    }
    .mine-course-wrap{
            top: -$rem*50;
            position: relative;
        .course-content{
            text-align: center;
            padding: $rem*30;
            background-color: rgba(253,255,254,.9);
            margin: $rem*20;
            border-radius: $rem*10;
            img{
                width: $rem*160;
                height: $rem*160;
                border-radius: 50%;
                margin-top: -$rem*110;
            }
            &>ul{
                @include clearfix;
                li{
                    font-size: $rem*32;
                    color: #666;
                    //border-bottom: $rem*2 solid #C52B3E;
                    float: left;
                    margin: $rem*50 0 $rem*44;
                    width: 33.33333%;
                    text-align: center;
                    padding-bottom: $rem*6;
                    &.is-active{
                      border-bottom: $rem*4 solid #C52B3E;
                    }
                }
            }
        }
        .course-list{
            @include clearfix;
            &>ul>li{
                margin-top: $rem*20;
                background-color: rgba(253,255,254,.9);
                margin: $rem*20;
                border-radius: $rem*10;
                position: relative;
                img{
                    width: $rem*120;
                    height: $rem*120;
                    border-radius: $rem*10;
                    margin: $rem*30 $rem*20 0 $rem*30;
                    float: left;
                }
                .course-info{
                    padding-left: $rem*170;
                    padding-bottom: $rem*30;
                    h3{
                        font-size: $rem*32;
                        color: #000;
                        padding-top: $rem*24;
                        padding-bottom: $rem*10;
                    }
                    span{
                        font-size: $rem*24;
                        color: #999;
                        display: block;
                    }
                }
            }
            .activity-status{
                width: $rem*50;
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
                background-color: rgb(102,102,102);
                padding-top: $rem*35;
                text-align: center;
                color:#fff;
                font-size: $rem*26;
                border-top-right-radius: $rem*10;
                border-bottom-right-radius: $rem*10;
                &.is-already{
                  background: #C52B3E;
                }
            }
        }
    }
}

.mine-writing-container{
    padding: $rem*20 0 $rem*34;
}

.story-list{
    .student-container{
        background: none;
        .stories-list{
            padding-bottom:$rem*.01;
        }
    }
}
